<template>
    <div class="lesson-box">
        <div class="search-row">
            <div class="search-item">
                <el-input v-model="searchParams.question" placeholder="请输入资源名称"></el-input>
            </div>
            <div class="search-actions">
                <el-button type="primary">
                    <el-icon><Search /></el-icon>查询
                </el-button>
                <el-button @click="uploadBook()">
                    <el-icon><RefreshLeft /></el-icon>重置
                </el-button>
            </div>
        </div>
        <div class="question-box">
            <div class="action-buttons">
                <div class="left-buttons">
                    <el-button class="manage" @click="revoke">
                        <el-icon><RefreshLeft /></el-icon>
                        <span>撤销发布</span>
                    </el-button>
                </div>
            </div>
            <div class="table-container">
                <el-table ref="multipleTableRef" :data="materials" style="width: 100%" @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" />
                    <el-table-column label="资源名称">
                        <template #default="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column prop="uploader" label="查看次数" />
                    <el-table-column prop="create_time" label="下载次数" />
                    <el-table-column property="name" label="操作" align="center" width="300">
                        <template #default="scope">
                            <div class="material-operations">
                                <el-link type="primary"  @click="edit(scope.row)" :underline="false">撤销发布</el-link>
                                <el-link type="primary"  @click="edit(scope.row)" :underline="false">置顶</el-link>
                                <el-link type="primary"  @click="preview(scope.row)" :underline="false">预览</el-link>
                                <el-link type="primary"  @click="viewDetail(scope.row)" :underline="false">查看详情</el-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="detailVisable" title="Tips" width="40%" top="30vh">
        <template #header>
            <div class="my-header">
                <span>资源详情</span>
            </div>
        </template>
        <div class="detail-dialog">
            <div class="li-box">
                <div class="li-item">资源名称：</div>
                <div class="li-item">蒲公英AI知识图谱.mp4</div>
            </div>
            <div class="li-box">
                <div class="li-item">资源介绍：</div>
                <div class="li-item">产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础</div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="viewDetail()">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref  } from 'vue'
    import { Search,RefreshLeft } from '@element-plus/icons-vue'
    const searchParams = ref({
        question: '',
    });
    const materials = ref([
        { id: 1, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: false,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 2, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: true,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 3, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: false,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 4, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: true,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 5, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: false,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 6, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: true,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 7, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: false,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
        { id: 8, name: '第一章 产品结构设计基础.pdf', uploader: 'XXX老师', create_time: '2025-9-14 15:36:31', public_status: false,desc: "产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础产品结构设计基础" },
    ]);
    const videoShow = ref(false);
    const detailVisable = ref(false)
    const preview = () => {
        videoShow.value = !videoShow.value;
    }
    const viewDetail = () => {
        detailVisable.value  =  !detailVisable.value;
    };
</script>
<style>
    .el-popper.is-light>.el-popper__arrow:before{border: none!important;}
</style>
<style scoped>
    :deep(.el-card__header){padding: 0;}
    :deep(.el-row){ width: 100%;display: flex;flex-direction: row;justify-content: space-between; }
    :deep(.el-card__body){padding: 0;}
    :deep(.el-input){height: 35px;}
    :deep(.inputs .el-input){width: 100%;}
    :deep(.el-button--primary){background: #1465E1;}
    :deep(.el-switch.is-checked .el-switch__core){background: #1465E1;border: 1px solid #1465E1;}
    :deep(.upload-demo){ display: flex; flex-direction: column; justify-content: start; align-items: start; }
    :deep(.manage):hover{border: 1px solid #1465E1;color: #1465E1;}
    .lesson-box{width: 100%;}
    .search-row { background: #fff;border-radius: 8px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 80px; }
    .search-item { min-width: 200px;margin-left: 20px; }
    :deep(.search-item .el-input){width: 100%;}
    .question-box{ height: 85vh;padding-right: 20px;margin-top: 20px;background: #fff;height: calc(85vh - 80px);border-radius: 8px; }
    .item-box{height: calc(85vh - 45px);}
    .search-actions{margin-right: 20px;}
    .action-buttons { display: flex; justify-content: space-between; padding: 20px 20px 20px 20px; border-bottom: 1px solid #eaeef2; }
    .left-buttons { display: flex; gap: 12px; height: 35px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .danger{color: #D4424A;height: 35px;border: 1px solid #D4424A;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .right-buttons { display: flex; gap: 12px; }
    .material-operations { display: flex; justify-content: end; gap: 12px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;position: absolute;bottom: 20px;right: 20px;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 10px;}
    .add-form .items .reds{ color: red; }
    .add-form .items .text{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;flex: 0 0 80px;text-align: left;text-align: right; }
    .add-form .inputs{ margin-top: 10px; }
    .box-item{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .headers{display: flex;flex-direction: row;justify-content: space-between;}
    .headers .right{display: flex;flex-direction: row;justify-content: center;gap: 20px;}
    .headers .right .download{ width: 120px;border: 1px solid #1465E1;border-radius: 10px;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;cursor: pointer; }
    .headers .right .download img{ width: 30px;height: 30px; }
    .headers .right .download span{ margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #1465E1;font-size: 14px; }
    .headers .right .over{ width: 120px;background: #1465E1;border-radius: 10px;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;cursor: pointer; }
    .headers .right .over img{ width: 30px;height: 30px; }
    .headers .right .over span{ margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px; }
    .dialog-content{width: 100%;min-height: 300px;}
    .dialog-content video{width: 100%;min-height: 300px;}
    .piliang{ display: flex;flex-direction: column; }
    .piliang span{display: block;padding: 5px 0 5px 0;text-align: center;cursor: pointer;}
    .piliang span:hover{background: #dfdfdf;}
    .my-header{text-align: left;}
    .detail-dialog{display: flex;flex-direction: column;}
    .detail-dialog .li-box{display: flex;flex-direction: row;}
    .detail-dialog .li-box .li-item{min-width: 100px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px;color: #888;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
</style>